<template>
    <view class="progress-bar">
      <view class="progress-bar-inner" :style="{ width: progress + '%' }">
        <image  class="arrow"  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/speed-gif.gif" mode="widthFix" ></image>
      </view>
      <template v-if="progress > 0">
        <view  class="arrow2"   mode="widthFix" ></view>
      </template>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      progress: {
        type: Number,
        default: 0
      }
    }
  }
  </script>
  
  <style scoped>
  .progress-bar {
    width: 100%;
    height: 100%;
    background-image: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/out-border.png');
    background-size: 100% 100%;
	  background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .progress-bar-inner {
    height: 60%;
    /* background-image: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/in-box.png');
    background-size: 100% 100%;
	  background-repeat: no-repeat; */
    background: linear-gradient(to right, #FFFFFF, #b188ff);
    margin-left:15rpx;
    display:flex;
    justify-content: flex-end;
    align-items:center;
  }
  
  .arrow {
    width: 30%;
    height: 60%;
  }

  .arrow2 {
    height: 60%;
    width: 10rpx;
    background-image: url("https://ojqn.wm2177.com/wechat_imgs/kapai-test/triangle.png");
    background-size: 100% 100%;
	  background-repeat: no-repeat;
    margin-left: -3rpx;
    margin-right:10rpx;
    display:flex;
    justify-content: flex-end;
    align-items:center;
  }
  
  @keyframes moveArrow {
    0% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
  }
  </style>